莫克力学习博客

扩展的XMLHttpRequest API

随着HTML5的到来，XMLHttpRequest API中新增了关于跨域请求、进度时间的上传、二进制数据的上传及下载等许多功能。

从服务器获取二进制数据

在HTML5之前，从服务器获取二进制数据，需要设置XMLHttpRequest对象的overrideMimeType方法，以此重载数据的Mime Type类型，用户自定义数据的字符编码类型。但这样有个缺点，responseText返回的并不是原始的二进制数据，而是一串字符串。
在HTML5中，新增了responseType属性与response属性来解决这个问题。
responseType
指定服务器返回数据的数据类型，text、arraybuffer、blob、json与document。
response
如果请求服务器成功，response属性值返回服务器响应的数据。

1
2
3
4
5
6
7
8
9
10
11
BlobBuilder= window.MozBlobBuilder||
 window.WebKitBlobBuilder||
 window.BlobBuilder;
var xhr =newXMLHttpRequest();
xhr.open('GET','/path/to/image.png',true);
xhr.responseType ='arraybuffer';
xhr.onload=function(e){
    if(this.status ==200){var bb =newBlobBuilder();
    bb.append(this.response);// Note: not xhr.responseTextvar blob = bb.getBlob('image/png');...
}};
xhr.send();

ArrayBuffer

ArrayBuffer 是二进制数据通用的固定长度容器。当responseType属性值为ArrayBuffer时，服务器端将会返回一个ArrayBuffer对象。

Blob 响应

当不需要修改从服务器端下载的二进制数据时，除了设置为ArrayBuffer外，还可以将responseType属性值为blob。

发送数据

HTML5之前，大多数浏览器只能通过send方法字符串或Document对象。
在HTML5中，可接受以下任何类型：

1
DOMString、Document、FormData、Blob、File、ArrayBuffer

发送字符串数据：xhr.send(DOMString)

设置 responseType=’text’

发送表单数据：xhr.send(FormData)

html表单enctype属性设置multipart/form-data，input设置name属性。然后js里构建FormData对象。
js

1
2
3
4
5
6
7
var formData=new FormData(myform);
formData.append('username','johndoe');
formData.append('id',123456);
var xhr =newXMLHttpRequest();
  xhr.open('POST','/server',true);
  xhr.onload =function(e){...};
  xhr.send(formData);

html

1
2
3
4
5
<form id="myform" name="myform" action="/server">
    <input type="text" name="username" value="johndoe">
    <input type="number" name="id" value="123456">
    <input type="submit" onclick="return sendForm(this.form);">
</form>

上传文件

上传文件也是通过构建FormData对象，上传方法与上述相似。

上传Blob对象

所有File对象都是一个Blob对象，因此可以通过发送Blob对象的方法来上传文件。
当需要显示上传进度时，通过Blob对象也十分适合。
但目前只有Chrome浏览器支持上传数据（不限于Blob对象）的同时同步跟新进度条控件中所显示的进度。

跨域数据请求

在HTML5以前，通过ajax不能跨域，在HTML5中，由于支持跨域数据通信，所以可以实现跨域数据请求。
跨域需要服务器启用CORS，如果服务器端已启用了 CORS，那么提交跨域请求就和普通的 XMLHttpRequest 请求没什么区别。